<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>《系统工程》精品资源共享课——系统评级方法课程详情</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<style type="text/css">
		#brief{
			margin:30px 100px;
			background-color: white;
			border-radius: 20px;
			max-height: 300px;
			display: flex;
		}
		#brief img{
			width:400px;
			height:225px;
			margin:30px;
		}
		#brief article{
			margin:20px;
		}
		#brief article header{
			margin-bottom:50px;
		}
		main{
			display:flex;
			padding-bottom: 40px
		}
		#catalog{
			margin:10px 0px 80px 100px;
			background-color: white;
			border-radius: 8px;
			width:300px;
			max-height: 460px;
		}
		
		#catalog ul li{
			list-style: none;
			padding:25px 30px;
			cursor: pointer;
			font-size:18px;
			border-radius: 4px;
			
		}
		#catalog ul li:hover{
			background-color:#504D4D;
			color:white;
		}
		.li-click{
			background-color:#2C2B2B;
			color:white;
		}
		#video{
			border-radius: 8px;
			background-color: white;
			padding:30px;
			margin:10px 100px 80px auto;
			width:800px;
			height:460px;
			position:relative;
		}
		#video video{
			position:absolute;
			
		}
		/*footer{
			min-height:100px;
			width:100%;
			position:absolute;
			background-color:#393434;
			bottom:0px;
			
		}
		footer p{
			position:absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			color: white;
		}*/
	</style>
</head>
<body>
	<nav>
		<img src="../image/xiaohui.jpg">
		<span>《系统工程》精品资源共享课</span>
		<ul>
			<li><a href="../index.html">首页</a></li>
			<li class="dropdown">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">基本资源<b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="../index.html#courses">教学视频</a></li>
					<li><a href="ppt.html">教学课件</a></li>
					<li><a href="primaryResource.html">教学大纲</a></li>
					<li><a href="primaryResource.html">教学日历</a></li>
					<li><a href="primaryResource.html">教学教材</a></li>
					<li><a href="primaryResource.html">参考资料</a></li>
					<li><a href="primaryResource.html">作业</a></li>
					<li><a href="primaryResource.html">重点难点</a></li>
				</ul>
			</li>
			<li><a href="../index.html#teachers">教师团队</a></li>
			<li><a href="achievements.html">教学成果</a></li>
			<li><a href="expandingResource.html">拓展资源</a></li>
			<li><a href="">论坛</a></li>
			<li class="login"><a href=""><img src="../image/user.png">登录</a></li>
		</ul>
	</nav>
	<section id="brief">
		<img src="../image/xtpjff.jpg">
		<article>
			<header>
				<h1>系统评级方法</h1>
			</header>
			<ol>
				<li>系统评价原理：系统评价问题的六要素（5W1H）</li>
				<li>综合评价方法</li>
				<li>层次分析法</li>
				<li>模糊综合评判法</li>
			</ol>
		</article>
	</section>
	<main>
		<section id="catalog">
			<ul>
				<li class="li-click">系统评价方法(1)</li>
				<li>系统评价方法(2)</li>
				<li>系统评价方法(3)</li>
				<li>系统评价方法(4)</li>
				<li>系统评价方法(5)</li>
				<li>系统评价方法(6)</li>
			</ul>
		</section>
		<section id="video">
			<video width="760px" height="400px" controls src="../videos/xtpjff1.mp4" type="video/mp4">
			</video>
		</section>
	</main>
	<footer>
		<p>版权所有：华南农业大学 数学与信息学院 软件学院</p>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
		//$("#video video").eq(0).show();
		//$("#video video").eq(0).siblings().hide();
		$("#catalog ul").on("click","li",function(ev){
			var target=$(ev.target);
			var ids=target.index()+1;
			var src="../videos/xtpjff"+ids+".mp4";
			//$("#video video").eq(ids).show().siblings().hide();
			$("#video video").attr("src",src);
			target.addClass('li-click');
			target.siblings().removeClass('li-click');
		});
	</script>
</body>
</html>